<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表渲染</title>
</head>
<body>

<div id="app">
    <ul v-for="(item,index) of items">
        <li>{{parentMessage}}--{{index}}--{{item.message}}</li>
    </ul>

    <label v-text="lable_text"></label>

    <ul>
        <template v-for="item in items">
            <li>{{item.message}}</li>
            <li class="divider"></li>
        </template>
    </ul>

    <label v-text="lable_text_obj"></label>

    <ul>
        <template v-for="(value,key,index) in obj1">
            <li>{{key}}-{{index}}-{{value}}</li>
        </template>
    </ul>

    <label v-text="lable_text_num"></label>

    <div>
        <span v-for="n in 10">{{n}}</span>
    </div>
</div>

<div id="app1">
    <li v-for="todo in todos" v-if="!todo.isComplete">
        {{ todo }}
    </li>
</div>

<script src="../modules/vue.js"></script>
<script>


    let appdata = {
        lable_text: 'template-v-for',
        lable_text_obj: '对象迭代-v-for',
        lable_text_num: '整数迭代-v-for',
        parentMessage: 'parent-node',
        items: [
            {message: 'foo'},
            {message: 'bar'},
            {message: 'est'},
            {message: 'lag'}
        ],
        obj1: {
            firstName: 'Jone',
            lastName: 'Doe',
            age: 30
        }
    }

    let vm = new Vue({
        el: '#app',
        data: appdata
    });

    let vm1 = new Vue({
        el: '#app1',
        data: {
            todos: [
                1, 2, 3, 4, {isComplete: 1}
            ]
        }
    });


    /**
     * <div id="todo-list-example">
     <input
     v-model="newTodoText"
     v-on:keyup.enter="addNewTodo"
     placeholder="Add a todo"
     >
     <ul>
     <li
     is="todo-item"
     v-for="(todo, index) in todos"
     v-bind:key="index"
     v-bind:title="todo"
     v-on:remove="todos.splice(index, 1)"
     ></li>
     </ul>
     </div>
     Vue.component('todo-item', {
        template: '\
    <li>\
      {{ title }}\
      <button v-on:click="$emit(\'remove\')">X</button>\
    </li>\
  ',
        props: ['title']
    })
     let vm1 = new Vue({
        el: '#todo-list-example',
        data: {
            newTodoText: '',
            todos: [
                'Do the dishes',
                'Take out the trash',
                'Mow the lawn'
            ]
        },
        methods: {
            addNewTodo: function () {
                this.todos.push(this.newTodoText)
                this.newTodoText = ''
            }
        }
    })*/


    /**
     import VueResource from 'vue-resource';
     Vue.use(VueResource);

     this.$http.get("http://www.vrserver.applinzi.com/aixianfeng/apihome.php").then(function(res){
     console.log(res);
     })*/

</script>
</body>

</html>